<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./vue.js"></script>
    </head>
    <style>
        table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }
        th,td{
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }
        th{
            background-color: #f7f7ff;
            color: #5c6b77;
            font-weight: 700;
        }
    </style>
    <body>
        <div id="app">
            <div v-if='books.length'>
                <table class="table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>书籍名称</th>
                            <th>出版日期</th>
                            <th>价格</th>
                            <th>购买数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in books">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.date}}</td>
                            <!-- <td>{{getFinalPrice(item.price)}}</td> -->

                            <!-- 过滤器方法 -->
                            <td>{{item.price | showPrice}}</td>
                            <td>
                                <button @click="decrement(index)" :disabled="item.count <= 0">-</button>
                                    {{item.count}}
                                <button @click="increment(index)">+</button>
                            </td>
                            <td>
                                <button @click="removeHandle(index)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h2>总价格:{{totalPrice | showPrice}}</h2>
            </div>
            <h2 v-else>购物车为空</h2>
        </div>
    </body>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                books:[
                    {
                        id:1,
                        name:"javascript",
                        date:"2006-9",
                        price:30.00,
                        count:1
                    },
                    {
                        id:2,
                        name:"jQuery",
                        date:"2007-6",
                        price:56.00,
                        count:0
                    },
                    {
                        id:3,
                        name:"java",
                        date:"2023-5",
                        price:120.00,
                        count:0
                    },
                    {
                        id:4,
                        name:"html",
                        date:"2003-3",
                        price:22.00,
                        count:0
                    },
                    {
                        id:5,
                        name:"css",
                        date:"2009-9",
                        price:56.00,
                        count:6
                    }
                ]
            },
            methods: {
                // getFinalPrice(price){
                //     return "¥" + price.toFixed(2);
                // }
                
                increment(index){
                    this.books[index].count++
                },
                decrement(index){
                    this.books[index].count--
                },
                removeHandle(index){
                    this.books.splice(index,1);
                    console.log(this.books)
                }
            },
            computed: {
                totalPrice(){
                    /* let totalPrice = 0;// 定义一个总数
                    for (let i = 0; i < this.books.length; i++) {
                        totalPrice += this.books[i].price * this.books[i].count
                    }
                    return totalPrice; */

                    // for(let i in/of this.books)

                    /* let totalPrice = 0;// 定义一个总数
                    for (const i in this.books) {
                        totalPrice += this.books[i].price * this.books[i].count
                    }
                    return totalPrice;
                    */

                    /* let totalPrice = 0;// 定义一个总数
                    for (const item of this.books) {
                        totalPrice += item.price * item.count
                    }
                    return totalPrice; */

                    // reduce 高阶函数
                    return this.books.reduce(function(preValue,book){
                        return preValue + book.price * book.count;
                    },0)
                }
            }, 
             
            
            /* 过滤器方法 */
            filters: {
                /* 过滤器里面是函数  自动的把前面的参数传到里面 */
                showPrice(price){
                    return "¥" + price.toFixed(2);
                }
            }
        })
    </script>
</html>